<template>
  <div>
    <Chart v-if="timeMode.mode === 2  && timeMode.endTime " :cdata="cdata"/>
    <!--拼图-->
    <Chart2 v-if=" !timeMode.endTime" :cdata="cdata"/>
  </div>
</template>

<script>
import Chart from './chart.vue'
import Chart2 from './chart2.vue'
import { isNotEmpty } from '@/utils'

export default {
  props: {
    mapType: {},
    apiData: {},
    timeMode: {},
  },
  data() {
    return {
      cdata: {}
    }
  },
  watch: {
    apiData: {
      handler(v) {
        if (!isNotEmpty(v)) return
        if (this.timeMode.mode === 2 && this.timeMode.endTime) {
          this.generateData()
        } else if (this.timeMode.mode === 1 && !v.endTime) {
          this.getData()
        }
      },
      immediate: true,
      deep: true

    }
  },
  components: {
    Chart2,
    Chart,
  },
  mounted() {
  },
  methods: {
    generateData() {
      const { apiData } = this;
      if (!apiData || !apiData.length) {
        return { xData: [], regions: [], seriesData: [] };
      }

      // xData：从每个区域中提取 areaName
      const xData = apiData.map(({ areaName }) => areaName);

      // 折线图数据（同比、环比），颜色数组为 ['#4cad1d', '#e79186']
      const lineSeriesNames = ['同比', '环比'];
      const lineColors = ['#4cad1d', '#e79186'];
      const lineSeriesData = lineSeriesNames.map((name, idx) => {
        const data =
            idx === 1
                ? apiData.map(({ tongBiBianHuaLiang }) => tongBiBianHuaLiang  )
                : apiData.map(({ huanBiBianHuaLiang }) => huanBiBianHuaLiang  );

        return {
          name,
          type: 'line',
          data,
          smooth: false,
          symbol: 'circle',
          symbolSize: 4,
          itemStyle: {
            color: lineColors[idx],
            borderColor: lineColors[idx]
          },

          lineStyle: {
            color: lineColors[idx]
          }
        };
      });

      // 柱状图数据，颜色数组为 ['#16b3e0', '#bcb155', '#4fb31c']
      const barSeriesNames = ['警情总量', '上一周期', '去年同期'];
      const barSeriesKeys = ['curNum', 'huanBiNum', 'tongQiNum'];
      const barColors = ['#16b3e0', '#bcb155', '#4fb31c'];
      const barSeriesData = barSeriesNames.map((name, idx) => {
        const data = apiData.map(item => item[barSeriesKeys[idx]]);
        return {
          name,
          type: 'bar',
          data,
          barWidth: 14,
          itemStyle: {
            color: barColors[idx]
          }
        };
      });

      // 将生成的数据存储到组件实例的 cdata 属性中
      this.cdata = { xData, lineSeriesData, barSeriesData };
    }    ,
    getData() {
      const colors = ['#ddae34', '#e79186', '#306fff', '#30c9c9']

      const data = this.apiData.map((item) => {
        return {
          value: item.curNum,
          name: item.areaName,
        }
      })

      // 为每个数据项指定相应的颜色，包括扇区颜色、延伸线颜色以及标签文字颜色
      this.cdata = data.map((item, index) => {
        return {
          value: item.value,
          name: item.name,
          itemStyle: {color: colors[index]},
          label: {
            alignTo: 'labelLine',
            // 延伸线上方显示值，下方显示名称（label）
            formatter: '{c}\n{name|{b}}',
            color: colors[index],
            fontFamily: 'PingFang SC, PingFang SC',
            fontSize: 16,
            textAlign: 'center',
            edgeDistance: 32,
            rich: {
              name: {
                fontSize: 14,
                color: '#fff'
              }
            }
          },
          labelLine: {
            lineStyle: {
              color: colors[index],
            }
          },
          labelLayout: function (params) {
            console.log(params, 'labelLayout')
            const isLeft = params.labelRect.x < (4722 / 2)
            const points = params.labelLinePoints
            // Update the end point.
            points[2][0] = isLeft
                ? params.labelRect.x
                : params.labelRect.x + params.labelRect.width
            return {
              labelLinePoints: points
            }
          }
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
